<template>
  <div>
    <div id="main" ref="chart"
         style="height: 480px;width:100%;max-width:750px;background:#f3f3f3;"></div>
    <canvas id="formap" width="750" height="1284"></canvas>
    <div v-show="show" class="bj-fixed">
      <div class="previw">
        <div class="close tabclose" @click="show=false"></div>
        <img :src="shareImg" class="previw-img">
        <div class="show-text">
          长按图片保存到手机
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../../../node_modules/echarts/map/js/china.js'

  export default {
    name: "Map",
    data() {
      return {
        charts: null,
        config: window.config,
        shareImg: "",
        show: false,
        height: 0,
        showRtext:window.showRtext
      }
    },
    mounted() {
      this.height = window.innerHeight;
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        this.charts = this.$echarts.init(this.$refs.chart)
        // 绘制图表
        this.charts.setOption(window.option, true);
        window.onresize = this.charts.resize;

        /* myChart.on("mouseover", function (params){
           myChart.dispatchAction({
             type: 'downplay'
           });
         });*/
      },

      makeCanvas() {
        console.log("点击")
        let canvas = document.getElementById('formap');
        let context = canvas.getContext('2d');
        canvas.width = 750;
        canvas.height = 1284;

        let bgImage = new Image();
        bgImage.crossOrigin = 'Anonymous';
        bgImage.src = '/static/image/share_img.png';
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.rect(0, 0, canvas.width, canvas.height);

        context.fillStyle = '#fff';
        context.fill();
        console.log("图片加载")
        bgImage.onload = () => {
          context.drawImage(bgImage, 0, 0, 750, 1284);
          let mapBase = new Image();
          var resultBase64 = this.charts.getDataURL({
            type: 'png',
            pixelRatio: 2,
            backgroundColor: '#fff'
          });
          console.log("图片数据", resultBase64);
          mapBase.src = resultBase64;
          mapBase.width = 540;
          mapBase.height = 403;
          mapBase.onload = () => {
            context.drawImage(mapBase, 100, 332, 550, 483);
            // 绘制截止日期
            context.font = '30px Arial';
            context.fillStyle = '#222222';

            context.fillText('截至 ' + this.config.update_time.substr(0, this.config.update_time.length - 3), 80, 230);

            // 绘制确诊
            context.font = '50px Arial';
            context.fillStyle = '#d81d1b';
            context.textAlign = 'center';
            context.fillText(this.config.confirmNumber.confirm, 156, 320);

            context.fillStyle = '#f7ab1a';
            context.fillText(this.config.confirmNumber.yisi, 300, 320);

            context.fillStyle = '#178b50';
            context.fillText(this.config.confirmNumber.safe, 455, 320);

            context.fillStyle = '#66666c';
            context.fillText(this.config.confirmNumber.die, 600, 320);

            context.fillStyle = '#222222';
            context.font = '30px Arial';
            context.fillText('全国确诊', 156, 360);
            context.fillText('疑似病例', 300, 360);
            context.fillText('治愈人数', 455, 360);
            context.fillText('死亡人数', 600, 360);
            let showTxt = this.showRtext[Math.floor(Math.random() * this.showRtext.length)];
            context.fillStyle = '#ffffff';
            context.font = '40px Arial';
            context.fillText(showTxt, 370, 955);
            let dataString = canvas.toDataURL('image/png');

            this.shareImg = dataString;


            this.show = true;

          };
        }

      }
    }
  }
</script>

<style scoped>
  #formap {
    position: absolute;
    left: -9999px;
    top: 0;
  }

  .bj-fixed {
    height: 100vh;
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 12;
  }

  .bj-fixed .previw {
    width: 300px;
    height: 514px;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 13;
  }

  .bj-fixed .previw .close {
    width: 50px;
    height: 50px;
    background: url(../../../assets/image/close-white.png) center center no-repeat;
    background-size: 30px 30px;
    position: absolute;
    right: -9px;
    top: -50px;
    z-index: 15;
  }

  .bj-fixed .previw .previw-img {
    width: 300px;
    height: 514px;
    z-index: 14;
  }

  .show-text {
    text-align: center;
    color: #fff;
    margin-top: 20px;
  }
</style>
